<template>
  <el-dialog :visible.sync="dialogVisible" width="600px"
             title="选择要插入签名" center>
    <ul class="dialogSign">
      <li v-for="item,index in signList" :key="item.id" @click="chooseSign(item,index)" class="more">
        {{item.htmlName}}
        <i class="el-icon-check" :style="{color:index==isSign?'#00aa00':'transparent'}"></i></li>
    </ul>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {query} from "@/api/mail/admin/mail-sign";

    export default {
        name: "dialogVisible",
        data() {
            return {
                dialogVisible: false,
                form: {
                    emailSubject: '',
                },
                signList: [],
                isSign: 0,
            }
        },
        methods: {
            submit() {
                this.form.emailSubject = this.signList[this.isSign].htmlContent;
                const str = ` <br> <br> <br>${this.form.emailSubject}`
                this.$emit('getDialogSign', str)
                this.dialogVisible = false;
            },
            //初始化
            init() {
                this.getSign();
            },
            chooseSign(item, index) {
                this.isSign = index;
            },
            getSign() {
                query({type: 1}).then(res => {
                    if(res.data.success){
                        this.signList = res.data.data;
                        this.signList.forEach((item,index)=>{
                            if(item.isDefault){
                                this.isSign=index;
                            }
                        })
                        if (this.signList.length == 0) {
                            this.$confirm('您还尚未创建签名，立即去创建?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: "success"
                            }).then(() => {
                                this.$store.commit('SET_CURRENTSETFRAG', 'fourth')
                                this.$router.push('/mail/administration')
                            }).catch(() => {
                            });
                        } else {
                            this.dialogVisible = true;
                        }
                    }
                }).catch(err => {
                    console.log(err)
                });
            },
        }
    }
</script>

<style scoped lang="scss">
  .dialogSign {
    max-height: 400px;
    overflow-y: scroll;

    li {
      height: 40px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;

      i {
        color: transparent;
        font-size: 27px;
      }

      .active {
        color: #00aa00;
      }
    }
  }
</style>
